<template>
	<div class="course-list-container">
		<button @click="turnTo()">公告</button>
		<div class="course-wrapper">
			<div class="course-header">我的课程</div>
			<view class="container">
				<!-- 课程列表 -->
				<view class="container">
					<!-- 课程列表 -->
					<view class="course-list">
						<view class="course-item" v-for="(item, index) in courses" :key="index">
							<view class="course-image">
								<!-- <image :src="item.image" mode="aspectFit"></image> -->
								<image src="../static/touxiang.jpg"></image>
							</view>
							<view class="course-info" @click="handleToMessage">
								<view class="course-details">
									<text class="course-name">{{ item.classesName }}</text>
									<br />
									<text class="teacher-name">{{ item.classes.tname }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<button @click="turnToMore()">查看更多</button>
		</div>
	</div>

</template>

<script>
import { classesINGList } from '../api/classes/classes';
	export default {
		data() {
			return {
				courses: [{
						image: 'path/to/image1.jpg',
						name: '课程名称1',
						teacher: '老师名字1'
					},
					{
						image: 'path/to/image2.jpg',
						name: '课程名称2',
						teacher: '老师名字2'
					}
				]
			}
		},
		methods: {
			handleToMessage() {
				uni.navigateTo({
					url: "/pages/classes_old/classes_old"
				})
			},
			turnToMore() {
				console.log("查看更多课程");
				uni.navigateTo({
					url: "/pages/ScoursesOpened/ScoursesOpened"
				})
			},
			turnTo() {
				console.log("查看更多通知");
				uni.navigateTo({
					url: "/pages/notice/notice"
				})
			},
			onLoad() {
				classesINGList().then(res => {
					console.log("对课程的查询");
					console.log(res)
					// for (var i = 0; i < res.data.length; i++) {
					// 	res.data[i].image=baseUrl+"/common/download?name="+res.data.data[i].image
					// }
					this.courses = res.data;
				})
			},

		},
	}
</script>

<style scoped>
	.course-list-container {
		padding: 20px;
	}

	.announcement {
		background-color: #e6f7ff;
		padding: 10px;
		margin-bottom: 20px;
		font-weight: bold;
		text-align: center;
	}

	.course-wrapper {
		border: 1px solid #d9d9d9;
		border-radius: 4px;
		padding: 10px;
	}

	.course-header {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.course-list {
		flex: 1;
		padding: 10px;
		background-color: #fff;
		/* 浅白色背景 */
		border-radius: 10px;
		/* 边缘光滑 */
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		/* 阴影效果 */
		margin-top: 10px;
		/* 上边距 */
		min-height: 100px;
		/* 设置最小高度 */
	}

	.course-item {
		display: flex;
		align-items: center;
		/* 垂直居中 */
		border: 1px solid #ccc;
		margin-bottom: 10px;
		padding: 10px;
		border-radius: 5px;
		/* 边缘光滑 */
		background-color: #f9f9f9;
		/* 浅白色背景 */
	}

	.course-image {
		width: 70px;
		/* 增加图片宽度 */
		height: 70px;
		/* 增加图片高度 */
		border-radius: 50%;
		/* 圆形图片 */
		margin-right: 20px;
		/* 增加图片与信息的间距 */
		overflow: hidden;
		/* 确保图片不会超出容器 */
	}

	.course-image>image {
		width: 100%;
		height: 100%;
	}

	.course-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		/* 垂直排列子元素 */
		justify-content: center;
		/* 垂直居中对齐文本 */
	}

	.course-name {
		font-weight: bold;
		/* 加粗课程名称 */
		margin-bottom: 5px;
		/* 课程名称与教师名字的间距 */
	}

	.teacher-name {
		color: #666;
		/* 教师名字的颜色 */
	}

	.course-price {
		align-self: flex-end;
		/* 价格靠右对齐 */
		margin-left: auto;
		/* 将价格推到容器最右侧 */
	}

	.more-button {
		margin-top: 20px;
		padding: 10px;
		background-color: #1890ff;
		color: white;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		align-self: center;
	}

	.more-button:hover {
		background-color: #40a9ff;
	}
</style>